<script setup lang="ts">
import { onMounted } from 'vue';
import Player from 'xgplayer/dist/simple_player';
import volume from 'xgplayer/dist/controls/volume';
import playbackRate from 'xgplayer/dist/controls/playbackRate';

// 注意要在 onMounted 钩子后执行，否则 dom 都没挂载到页面，无法根据 id 获取相应 dom
onMounted(() => {
  new Player({
    id: 'myVideo',
    url: 'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4',
    poster: 'https://s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg',
    controlPlugins: [volume, playbackRate],
    playbackRate: [0.5, 0.75, 1, 1.5, 2], //传入倍速可选数组
  });
});
</script>

<template>
  <div class="p-4 h-full">
    <div class="border border-solid border-gray-200 bg-white">
      <div class="font-bold border-b border-solid border-gray-200 box-border p-5">视频播放（本页面已KeepAlive）</div>
      <el-row>
        <el-col :xs="24" :sm="24" :md="24" :lg="24">
          <div class="p-5 box-border flex justify-center items-center">
            <div id="myVideo"></div></div
        ></el-col>
      </el-row>
    </div>
  </div>
</template>
